<template>
  <div>
    <el-form inline :model="shareSetQuery">
      <el-form-item label="标题">
        <el-input v-model="shareSetQuery.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="创建者">
        <el-input v-model="shareSetQuery.creatorId" placeholder="请输入创建者"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="shareSetQuery.privacy" placeholder="请选择公开范围" style="width: 240px">
          <el-option label="公开" value="1"></el-option>
          <el-option label="私密" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getShareSetPage" icon="Search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="dialogVisible=true" icon="Plus">新增</el-button>
    <el-table :data="shareSetPage.list" border stripe>
      <el-table-column label="ID" prop="setId"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="描述" prop="description"></el-table-column>
      <el-table-column label="创建者" prop="creatorId"></el-table-column>
      <el-table-column label="公开范围" prop="privacy">
        <template v-slot="scope">
          <el-tag v-if="scope.row.privacy===1">公开</el-tag>
          <el-tag v-else>私密</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="点赞数" prop="likeCount"></el-table-column>
      <el-table-column label="收藏数" prop="favoriteCount"></el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-space>
            <el-button size="small" type="primary" @click="openEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteShareSet(scope.row)">删除</el-button>
            <el-dropdown>
              <el-button size="small">
                更多
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item @click="goSection(scope.row.setId)">章节管理</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="shareSetQuery.pageNum"
        v-model:page-size="shareSetQuery.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="shareSetPage.total"
    />
    <el-dialog
        v-model="dialogVisible"
        title="分享合集"
        width="600"
        @close="closeDialog"
    >
      <div>
        <el-form :model="shareSetForm" ref="formRef" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="shareSetForm.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="shareSetForm.description" placeholder="请输入描述"></el-input>
          </el-form-item>
          <el-form-item label="封面">
            <el-upload
                class="avatar-uploader"
                :headers="$getHeaders"
                :action="fileUpload"
                :data="{sceneCode:'share:set'}"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
              <el-image v-if="shareSetForm.cover" :src="shareSetForm.cover" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="创建者">
            <el-input v-model="shareSetForm.creatorId" placeholder="请输入创建者"></el-input>
          </el-form-item>
          <el-form-item label="公开范围">
            <el-select v-model="shareSetForm.privacy" placeholder="请选择公开范围" style="width: 240px">
              <el-option label="公开" value="1"></el-option>
              <el-option label="私密" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-cascader v-model="shareSetForm.categoryId" :options="categoryTreeList" :props="props"/>
          </el-form-item>
          <el-form-item label="播放量">
            <el-input v-model="shareSetForm.viewCount" placeholder="请输入播放量"></el-input>
          </el-form-item>
          <el-form-item label="点赞数">
            <el-input v-model="shareSetForm.likeCount" placeholder="请输入点赞数"></el-input>
          </el-form-item>
          <el-form-item label="收藏数">
            <el-input v-model="shareSetForm.favoriteCount" placeholder="请输入收藏数"></el-input>
          </el-form-item>
          <el-form-item label="是否精选">
            <el-select v-model="shareSetForm.isFeatured" placeholder="请选择是否精选" style="width: 240px">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitShareSet(formRef)">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, watch} from 'vue'
import {reqCreateVideoSet, reqDeleteVideoSet, reqGetVideoSetPage} from "@/api/share/set";
import type {FormInstance} from 'element-plus'
import {reqGetCategoryTreeList} from "@/api/share/category";
import {fileUpload} from '@/util'
import {ElMessageBox} from 'element-plus'
import {ArrowDown} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";

let dialogVisible = ref(false)
const router = useRouter()
let formRef = ref()
const isEditing = ref(false);
let shareSetQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  title: '',
  creatorId: '',
  privacy: ''
})
let categoryTreeList = ref([])
let props = reactive({
  value: 'categoryId',
  label: 'name',
  children: 'children',
  emitPath: false
});
let shareSetPage = reactive({
  total: 0,
  list: [],
  pageNum: 1,
})
let shareSetForm = reactive({
  setId: null,
  title: '',
  description: '',
  cover: '',
  creatorId: '',
  privacy: 1,
  categoryId: null,
  createTime: null,
  updateTime: null,
  viewCount: 0,
  likeCount: 0,
  favoriteCount: 0,
  isFeatured: 0,
  isCurated: 0,
})

let getShareSetPage = async () => {
  let res = await reqGetVideoSetPage(shareSetQuery)
  Object.assign(shareSetPage, res.data)
}
let goSection=(setId)=>{
  router.push({
    path: '/layout/share/section',
    query: {
      setId: setId
    }
  })
}
let handleAvatarSuccess = (res) => {
  shareSetForm.cover = res.data.visitPath
}
let openEdit = (node) => {
  isEditing.value = true
  Object.assign(shareSetForm, node)
  dialogVisible.value = true
}
let submitShareSet = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await reqCreateVideoSet(shareSetForm)
    } else {
      console.log('error submit!', fields)
    }
  })
  await getShareSetPage()
  dialogVisible.value = false
}

let getCategoryTreeList = async () => {
  let res = await reqGetCategoryTreeList()
  categoryTreeList.value = res.data
}
let closeDialog=()=>{
  shareSetForm.setId=null
  shareSetForm.title=''
  shareSetForm.description=''
  shareSetForm.cover=''
  shareSetForm.creatorId=''
  shareSetForm.privacy=1
  shareSetForm.categoryId=null
  shareSetForm.createTime=null
  shareSetForm.updateTime=null
  shareSetForm.viewCount=0
  shareSetForm.likeCount=0
  shareSetForm.favoriteCount=0
  shareSetForm.isFeatured=0
  shareSetForm.isCurated=0

}
let deleteShareSet = (row) => {
  ElMessageBox.confirm(
      `删除之后无法恢复，请问是否删除合集${row.title}?`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      } as string
  )
      .then(() => {
        reqDeleteVideoSet(row.setId).then(res => {
          getShareSetPage()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}
watch([() => shareSetQuery.pageNum, () => shareSetQuery.pageSize], () => {
  getShareSetPage()
})
onMounted(() => {
  getShareSetPage()
  getCategoryTreeList()
})
</script>

<style scoped>

</style>
